'use client'

import { Message } from '@/types/chat'
import { useEffect, useState } from 'react'

interface MessageListProps {
  messages: Message[]
  children?: React.ReactNode
  onQuickQuestion?: (question: string) => void
  isDarkMode?: boolean
}

// 国际化文本配置
const i18n = {
  zh: {
    today: '今日',
    weekdays: ['日', '一', '二', '三', '四', '五', '六'],
    weekdayPrefix: '周',
    title: '你可以这样问',
    subtitle: 'HAVE A TRY',
    healthTip: '护你健康生活每一天',
    quickQuestions: [
      '我有些健康问题需要咨询',
      '冷水澡真能燃烧脂肪?',
      '口腔溃疡会传染吗?',
      '口腔溃疡是缺乏维生素吗?'
    ]
  },
  en: {
    today: 'Today',
    weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    weekdayPrefix: '',
    title: 'You can ask like this',
    subtitle: 'HAVE A TRY',
    healthTip: 'Protecting your health every day',
    quickQuestions: [
      'I have some health concerns that need advice',
      'Can cold showers really burn fat?',
      'Are mouth ulcers contagious?',
      'Are mouth ulcers caused by vitamin deficiency?'
    ]
  }
}

export default function MessageList({ messages, children, onQuickQuestion, isDarkMode = false }: MessageListProps) {
  // 检测系统语言
  const [language, setLanguage] = useState<'zh' | 'en'>('zh')

  useEffect(() => {
    const detectLanguage = () => {
      const userLang = navigator.language || (navigator as any).userLanguage
      const isZh = userLang.toLowerCase().startsWith('zh')
      setLanguage(isZh ? 'zh' : 'en')
    }
    detectLanguage()
  }, [])

  const t = i18n[language]

  // 获取当前日期信息
  const getCurrentDateInfo = () => {
    const now = new Date()
    const month = now.getMonth() + 1
    const day = now.getDate()
    const weekday = t.weekdays[now.getDay()]
    
    return {
      dateStr: `${month}/${day}`,
      weekdayStr: t.weekdayPrefix ? `${t.weekdayPrefix}${weekday}` : weekday
    }
  }

  const { dateStr, weekdayStr } = getCurrentDateInfo()

  if (messages.length === 0) {
    return (
      <div className={`h-full flex items-center justify-center ${isDarkMode ? 'bg-gray-900' : 'bg-gray-50'} px-4`}>
        <div className="w-full max-w-2xl mx-auto">
          {/* 标题 */}
          <div className="text-center mb-8">
            <div className="flex items-center justify-center space-x-4 mb-2">
              <p className={`text-sm ${isDarkMode ? 'text-gray-500' : 'text-gray-400'}`}>{t.today}</p>
              <p className={`text-sm ${isDarkMode ? 'text-gray-500' : 'text-gray-400'}`}>{weekdayStr}</p>
              <p className={`text-sm ${isDarkMode ? 'text-gray-500' : 'text-gray-400'}`}>{dateStr}</p>
            </div>
            <h2 className={`text-2xl font-normal ${isDarkMode ? 'text-gray-200' : 'text-gray-800'}`}>{t.title}</h2>
            <p className={`text-sm ${isDarkMode ? 'text-gray-500' : 'text-gray-400'} mt-1`}>{t.subtitle}</p>
          </div>

          {/* 快捷提问卡片 */}
          <div className="space-y-3">
            {t.quickQuestions.map((question, index) => (
              <button
                key={index}
                onClick={() => onQuickQuestion?.(question)}
                className={`w-full ${isDarkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-white hover:shadow-md'} rounded-2xl px-6 py-4 shadow-sm transition-all duration-200 flex items-center justify-between group`}
              >
                <div className="flex items-center space-x-3">
                  <div className={`w-8 h-8 rounded-full ${isDarkMode ? 'bg-blue-600' : 'bg-blue-500'} flex items-center justify-center flex-shrink-0`}>
                    <span className="text-white font-bold text-lg">#</span>
                  </div>
                  <span className={`${isDarkMode ? 'text-gray-200' : 'text-gray-800'} text-base font-normal`}>{question}</span>
                </div>
                <svg 
                  className={`w-6 h-6 ${isDarkMode ? 'text-gray-600 group-hover:text-gray-500' : 'text-gray-300 group-hover:text-gray-400'} transition-colors flex-shrink-0`}
                  fill="none" 
                  stroke="currentColor" 
                  viewBox="0 0 24 24"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </button>
            ))}
          </div>

          {/* 底部健康提示 */}
          <div className="text-center mt-8">
            <p className={`text-sm ${isDarkMode ? 'text-gray-500' : 'text-gray-400'}`}>{t.healthTip}</p>
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="h-full">
      {children}
    </div>
  )
}
